<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<app-help-massage-show
  *ngIf="app != undefined"
  [help_massage_content]="'monitor.app.' + app + '.help' | i18n"
  [guild_link]="'monitor.app.' + app + '.helpLink' | i18n"
  [icon_name]="getAppIconName(app)"
></app-help-massage-show>
<app-help-massage-show
  *ngIf="app == undefined"
  [help_massage_content]="'monitors.center.help' | i18n"
  [guild_link]="'monitors.center.help.link' | i18n"
  [module_name]="'menu.monitor.center'"
  [icon_name]="'laptop'"
></app-help-massage-show>
<nz-divider></nz-divider>

<div style="margin-bottom: 20px">
  <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
    <i nz-icon nzType="sync" nzTheme="outline"></i>
  </button>
  <button *ngIf="app != undefined" nz-button nzType="primary">
    <a routerLink="/monitors/new" [queryParams]="{ app: app }">
      <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
      {{ 'monitors.new' | i18n }} {{ 'monitor.app.' + app | i18n }}
    </a>
  </button>

  <button *ngIf="app == undefined" nz-button nzType="primary" (click)="onAppSwitchModalOpen()">
    <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
    {{ 'monitors.new-monitor' | i18n }}
  </button>
  <button nz-button nz-dropdown [nzDropdownMenu]="more_menu">
    <span nz-icon nzType="ellipsis"></span>
  </button>
  <nz-dropdown-menu #more_menu="nzDropdownMenu">
    <ul nz-menu>
      <li nz-menu-item>
        <button nz-button nzType="primary" (click)="onEnableManageMonitors()" class="mobile-hide">
          <i nz-icon nzType="play-circle" nzTheme="outline"></i>
          {{ 'monitors.enable' | i18n }}
        </button>
      </li>
      <li nz-menu-item>
        <button nz-button nzType="primary" nzDanger (click)="onCancelManageMonitors()" class="mobile-hide">
          <i nz-icon nzType="pause-circle" nzTheme="outline"></i>
          {{ 'monitors.cancel' | i18n }}
        </button>
      </li>
      <li nz-menu-item>
        <button nz-button nzType="primary" nzDanger (click)="onDeleteMonitors()">
          <i nz-icon nzType="delete" nzTheme="outline"></i>
          {{ 'monitors.delete-monitor' | i18n }}
        </button>
      </li>
      <li nz-menu-item>
        <button nz-button nzType="primary" (click)="onExportMonitors()">
          <i nz-icon nzType="export" nzTheme="outline"></i>
          {{ 'monitors.export' | i18n }}
        </button>
      </li>
      <li nz-menu-item>
        <nz-upload nzAction="/monitors/import" [nzLimit]="1" [nzShowUploadList]="false" (nzChange)="onImportMonitors($event)">
          <button nz-button nzType="primary">
            <i nz-icon nzType="import" nzTheme="outline"></i>
            {{ 'monitors.import' | i18n }}
          </button>
        </nz-upload>
      </li>
    </ul>
  </nz-dropdown-menu>
  <button style="margin-right: 25px; float: right" class="mobile-hide" nz-button nzType="primary" (click)="onFilterSearchMonitors()">
    {{ 'common.search' | i18n }}
  </button>
  <input
    style="margin-right: 5px; float: right; width: 180px; border-radius: 9px; text-align: center"
    class="mobile-hide"
    nz-input
    type="text"
    [placeholder]="'monitors.search.placeholder' | i18n"
    nzSize="default"
    (keyup.enter)="onFilterSearchMonitors()"
    [(ngModel)]="filterContent"
  />
  <input
    style="margin-right: 5px; float: right; width: 90px; border-radius: 9px; text-align: center"
    class="mobile-hide"
    nz-input
    type="text"
    [placeholder]="'monitors.search.tag' | i18n"
    nzSize="default"
    (keyup.enter)="onFilterSearchMonitors()"
    [(ngModel)]="tag"
  />
  <nz-select
    style="margin-right: 10px; float: right"
    class="mobile-hide"
    nzAllowClear
    [nzPlaceHolder]="'monitor.status' | i18n"
    [(ngModel)]="filterStatus"
  >
    <nz-option [nzLabel]="'monitor.status.all' | i18n" nzValue="9"></nz-option>
    <nz-option [nzLabel]="'monitor.status.up' | i18n" nzValue="1"></nz-option>
    <nz-option [nzLabel]="'monitor.status.down' | i18n" nzValue="2"></nz-option>
    <nz-option [nzLabel]="'monitor.status.paused' | i18n" nzValue="0"></nz-option>
  </nz-select>
</div>

<nz-table
  #fixedTable
  [nzData]="monitors"
  [nzPageIndex]="pageIndex"
  [nzPageSize]="pageSize"
  [nzTotal]="total"
  nzFrontPagination="false"
  [nzLoading]="tableLoading"
  nzShowSizeChanger
  [nzShowTotal]="rangeTemplate"
  [nzPageSizeOptions]="[8, 15, 25]"
  (nzQueryParams)="onTablePageChange($event)"
  nzShowPagination="true"
  [nzScroll]="{ x: '1240px', y: '100%' }"
>
  <thead>
    <tr>
      <th nzAlign="center" nzLeft nzWidth="3%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
      <th nzAlign="center" nzWidth="20%" nzColumnKey="name" [nzSortFn]="true">{{ 'monitor.name' | i18n }}</th>
      <th nzAlign="center" nzWidth="10%" nzColumnKey="status" [nzSortFn]="true">{{ 'monitor.status' | i18n }}</th>
      <th nzAlign="center" nzWidth="12%">{{ 'monitor.host' | i18n }}</th>
      <th nzAlign="center" nzWidth="10%">{{ 'monitor.app' | i18n }}</th>
      <th nzAlign="center" nzWidth="21%">{{ 'tag' | i18n }}</th>
      <th nzAlign="center" nzWidth="14%" nzColumnKey="gmtUpdate" [nzSortFn]="true">{{ 'common.edit-time' | i18n }}</th>
      <th nzAlign="center" nzWidth="10%">{{ 'common.edit' | i18n }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of fixedTable.data">
      <td nzAlign="center" nzLeft [nzChecked]="checkedMonitorIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
      <td nzAlign="center">
        <button nz-button nzSize="default" nzType="link" [routerLink]="['/monitors/' + data.id]">
          {{ data.name }}
          <span nz-icon nzType="area-chart"></span>
        </button>
      </td>
      <td nzAlign="center">
        <nz-tag *ngIf="data.status == 0" [nzColor]="'#b2b2b2'">
          <i nz-icon nzType="meh" nzTheme="outline"></i>
          <span>{{ 'monitor.status.paused' | i18n }}</span>
        </nz-tag>
        <nz-tag *ngIf="data.status == 1" [nzColor]="'#498765'">
          <i nz-icon nzType="smile" nzTheme="outline"></i>
          <span>{{ 'monitor.status.up' | i18n }}</span>
        </nz-tag>
        <nz-tag *ngIf="data.status == 2" [nzColor]="'#fd4357'">
          <i nz-icon nzType="frown" nzTheme="outline"></i>
          <span>{{ 'monitor.status.down' | i18n }}</span>
        </nz-tag>
      </td>
      <td nzAlign="center">
        <button
          nz-button
          nzSize="default"
          nzType="text"
          [cdkCopyToClipboard]="data.host"
          nz-tooltip
          [nzTooltipTitle]="'common.copy' | i18n"
          (click)="notifyCopySuccess()"
        >
          {{ data.host }}
          <span nz-icon nzType="copy"></span>
        </button>
      </td>
      <td nzAlign="center">
        <a routerLink="/monitors" [queryParams]="{ app: data.app }">
          <nz-tag nzColor="processing" class="hoverClass">
            <i nz-icon nzType="cloud"></i>
            <span>{{ 'monitor.app.' + data.app | i18n }}</span>
          </nz-tag>
        </a>
      </td>
      <td nzAlign="left">
        <a *ngFor="let tag of data?.tags; let i = index" routerLink="/monitors" [queryParams]="{ tag: sliceTagName(tag) }">
          <nz-tag style="margin-top: 2px" [nzColor]="tag?.color" class="hoverClass">
            {{ sliceTagName(tag) }}
          </nz-tag>
        </a>
      </td>
      <td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date : 'YYYY-MM-dd HH:mm:ss' }}</td>
      <td nzAlign="center">
        <button nz-button nzType="primary" [routerLink]="['/monitors/' + data.id]" nz-tooltip [nzTooltipTitle]="'monitors.detail' | i18n">
          <i nz-icon nzType="area-chart" nzTheme="outline"></i>
        </button>
        <button nz-button nz-dropdown [nzDropdownMenu]="more_menu">
          <span nz-icon nzType="ellipsis"></span>
        </button>
        <nz-dropdown-menu #more_menu="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item>
              <button
                nz-button
                nzType="primary"
                (click)="onEditOneMonitor(data.id)"
                nz-tooltip
                [nzTooltipTitle]="'monitors.edit-monitor' | i18n"
              >
                <i nz-icon nzType="edit" nzTheme="outline"></i>
              </button>
            </li>
            <li nz-menu-item>
              <button
                *ngIf="data.status == 0"
                nz-button
                nzType="primary"
                (click)="onEnableManageOneMonitor(data.id)"
                nz-tooltip
                [nzTooltipTitle]="'monitors.enable' | i18n"
              >
                <i nz-icon nzType="play-circle" nzTheme="outline"></i>
              </button>
            </li>
            <li nz-menu-item>
              <button
                *ngIf="data.status != 0"
                nz-button
                nzDanger
                nzType="primary"
                (click)="onCancelManageOneMonitor(data.id)"
                nz-tooltip
                [nzTooltipTitle]="'monitors.cancel' | i18n"
              >
                <i nz-icon nzType="pause-circle" nzTheme="outline"></i>
              </button>
            </li>
            <li nz-menu-item>
              <button
                nz-button
                nzType="primary"
                nzDanger
                (click)="onDeleteOneMonitor(data.id)"
                nz-tooltip
                [nzTooltipTitle]="'monitors.delete-monitor' | i18n"
              >
                <i nz-icon nzType="delete" nzTheme="outline"></i>
              </button>
            </li>
          </ul>
        </nz-dropdown-menu>
      </td>
    </tr>
  </tbody>
</nz-table>

<ng-template #rangeTemplate> {{ 'common.total' | i18n }} {{ total }} </ng-template>

<nz-modal
  [(nzVisible)]="isSwitchExportTypeModalVisible"
  [nzTitle]="'monitors.export.switch-type' | i18n"
  nzOkDisabled="true"
  [nzFooter]="switchExportTypeModalFooter"
>
  <ng-container *nzModalContent>
    <!--    <p style="text-align: center">-->
    <!--      <button nz-button nzType="primary" nzSize="large" (click)="exportMonitors('YAML')" [nzLoading]="exportYamlButtonLoading">-->
    <!--        <span nz-icon nzType="download"></span>-->
    <!--        {{ 'monitors.export.use-type' | i18n : { type: 'YAML' } }}-->
    <!--      </button>-->
    <!--    </p>-->
    <p style="text-align: center">
      <button nz-button nzType="primary" nzSize="large" (click)="exportMonitors('JSON')" [nzLoading]="exportJsonButtonLoading">
        <span nz-icon nzType="download"></span>
        {{ 'monitors.export.use-type' | i18n : { type: 'JSON' } }}
      </button>
    </p>
    <p style="text-align: center">
      <button nz-button nzType="primary" nzSize="large" (click)="exportMonitors('EXCEL')" [nzLoading]="exportExcelButtonLoading">
        <span nz-icon nzType="download"></span>
        {{ 'monitors.export.use-type' | i18n : { type: 'EXCEL' } }}
      </button>
    </p>
  </ng-container>
</nz-modal>

<!-- filter app type modal -->
<nz-modal
  [(nzVisible)]="appSwitchModalVisible"
  (nzOnCancel)="onAppSwitchModalCancel()"
  nzClosable="false"
  nzWidth="30%"
  [nzOkText]="null"
  [nzCancelText]="null"
  [nzOkLoading]="appSearchLoading"
>
  <div *nzModalContent class="-inner-content">
    <div style="text-align: center">
      <nz-input-group nzSize="large" nzSearch="true" style="width: 97%; border-radius: 12px" [nzPrefix]="suffixIconSearch">
        <input
          nz-input
          type="text"
          [placeholder]="'monitors.center.search.placeholder' | i18n"
          nzSize="default"
          (keyup.enter)="searchSwitchApp()"
          [(ngModel)]="appSearchContent"
        />
      </nz-input-group>
      <ng-template #suffixIconSearch>
        <span nz-icon nzType="search"></span>
      </ng-template>
    </div>
    <div style="min-height: 100px; margin-top: 20px">
      <nz-list nzSplit="false" style="max-height: 400px; overflow-y: scroll">
        <nz-spin [nzSpinning]="appSearchLoading">
          <nz-list-item
            *ngFor="let appItem of appSearchResult"
            nzNoFlex="true"
            class="switch-app"
            routerLink="/monitors/new"
            (keyup.enter)="gotoMonitorAddDetail(appItem.value)"
            [queryParams]="{ app: appItem.value }"
          >
            <button nz-button nzType="default" style="margin-left: 24px">
              <i nz-icon [nzType]="getAppIconName(appItem.value)" nzTheme="outline"></i>
              {{ appItem.categoryLabel }}
            </button>
            <button nz-button nzType="default" style="left: 40%; position: absolute">
              {{ appItem.label }}
            </button>
            <span style="right: 10px; position: absolute"><i nz-icon nzType="arrow-right" nzTheme="outline"></i></span>
          </nz-list-item>
        </nz-spin>
      </nz-list>
    </div>
  </div>
</nz-modal>
